<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与watch</title>
    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
  <div class="d1">
    <h1>没有使用计算属性前：</h1>
    {{new Date(birthday).getFullYear()}}年{{new Date(birthday).getMonth() + 1}}月{{new Date(birthday).getDate()}}日
    <h1>使用计算属性：</h1>
    {{birth}}
    <h1>监控变量值的变化：</h1>
    <input type="text" v-model="msg">
  </div>
</body>
</html>

<script>
  new Vue({
    el:'.d1',
    data:{
      birthday:1529032123201, // 毫秒值
      msg:''
    },
    //1. 计算属性用法示例
    computed:{
      birth(){      // 注意：这里定义的是方法名，实际上是属性名,在使用时不要带括号
        //1.1 根据毫秒值，构造一个日期对象
        let dt = new Date(this.birthday)
        //1.2 得到时间的各个部分
        let year = dt.getFullYear();
        let month = dt.getMonth() + 1;
        let day = dt.getDate();
        //1.3 返回
        return year + '年' + month + '月' + day + '日'
      }
    },
    //2. watch用来监控属性值的变化
    watch:{
      msg(newV,oldV){   // oldV: 代表监控变量msg的旧值， newV：代表监控变量msg的新值
        console.log('旧值：',oldV,',新值：',newV)
      }
    }
  })
</script>
